<div>
  <nav class="octotree_sidebar">
    <a class="octotree_toggle btn"><div class="loader"></i><span></span></a>
    <a class="octotree_opts" href="javascript:void(0)"><span></span></a>
    <div class="octotree_views">
      <div class="octotree_view octotree_treeview current">
        <div class="octotree_view_header"></div>
        <div class="octotree_view_body"></div>
      </div>

      <div class="octotree_view octotree_errorview">
        <div class="octotree_view_header"></div>
        <form class="octotree_view_body">
          <div class="message"></div>
          <div>
            <input name="token" type="text" placeholder="Paste access token here" autocomplete="off">
          </div>
          <div>
            <button type="submit" class="btn">Save</button>
            <a href="https://github.com/buunguyen/octotree#github-access-token" target="_blank" tabIndex="-1">Why is this required?</a>
          </div>
          <div class="error"></div>
        </form>
      </div>

      <div class="octotree_view octotree_optsview">
        <div class="octotree_view_header">Settings</div>
        <form class="octotree_view_body">
          <div>
            <div>
              <label>Site access token</label>
              <a href="https://github.com/buunguyen/octotree#github-access-token" target="_blank" tabIndex="-1">what's this?</a>
            </div>
            <input type="text" data-store="TOKEN" data-perhost="true">
          </div>
          <!-- @ifdef CHROME -->
          <div>
            <div>
              <label>GitHub Enterprise URLs</label>
            </div>
            <textarea data-store="GHEURLS" placeholder="https://github.mysite1.com/                                        https://github.mysite2.com/">
            </textarea>
          </div>
          <!-- @endif -->
          <hr />
          <div>
            <label><input type="checkbox" data-store="REMEMBER"> Show sidebar if previously shown</label>
          </div>
          <div>
            <label><input type="checkbox" data-store="NONCODE"> Show in non-code pages</label>
          </div>
          <div>
            <label><input type="checkbox" data-store="LAZYLOAD"> Only load tree when sidebar is open</label>
          </div>
          <div>
            <label><input type="checkbox" data-store="COLLAPSE"> Collapse folders with single sub-folder</label>
          </div>
          <div>
            <div>
              <label>Hotkeys</label>
              <a href="https://github.com/madrobby/keymaster#defining-shortcuts" target="_blank" tabIndex="-1">supported keys</a>
            </div>
            <input type="text" data-store="HOTKEYS">
          </div>
          <div>
            <div>
              <label>Tab size</label>
              <a href="https://github.com/tiimgreen/github-cheat-sheet#adjust-tab-space" target="_blank" tabIndex="-1">what's this?</a>
            </div>
            <input type="text" data-store="TABSIZE">
          </div>
          <div>
            <button type="submit" class="btn">Save</button>
          </div>
        </form>
      </div>
    </div>
  </nav>

  <div class="octotree_popup">
    <div class="arrow"></div>
    <div class="content">
      Octotree is enabled on GitHub pages. Click this button or press
      <!-- @ifdef SAFARI -->
      <kbd>cmd b</kbd> (or <kbd>ctrl b</kbd>)
      <!-- @endif -->
      <!-- @ifndef SAFARI -->
      <kbd>cmd shift s</kbd> (or <kbd>ctrl shift s</kbd>)
      <!-- @endif -->
      to show it.
    </div>
  </div>
</div>
